import React from 'react';
import { type SwitchProps, Switch } from '@mantine/core';
import classNames from 'classnames';
import { mergeClassNames } from '../tools';
import { useControllableValue } from 'ahooks';

// interface ExtendedSwitchProps extends SwitchProps {}
export const NSwitch = React.memo((props: SwitchProps) => {
  const [value, setValue] = useControllableValue({
    value: props.checked,
    onChange: props.onChange,
  });
  return (
    <Switch
      size="md"
      {...props}
      classNames={mergeClassNames(
        {
          // root: 'h-21',
          // body: 'h-21',
          track: classNames('border-none w-41 h-21', value ? 'bg-btnBgc-0' : 'bg-btnBgc-1'),
          thumb: 'size-19 border-none bg-white',
        },
        props.classNames,
      )}
      checked={value}
      onChange={setValue}
    />
  );
});
